<template>
  <view class="incomeMain">
    <view class="incomeBox">
      <view class="monthIncomeMain">
        <view class="monthIncomeBody">
          <view class="otherTotalBox">
            <view class="totalView flex align-center justify-around">
              <view>
                今日总收益(元)
                <view>{{
                  balance.today_income
                    ? $tools.format(balance.today_income)
                    : "0.00"
                }}</view>
              </view>
              <view>
                累计收益(元)
                <view>{{
                  balance.total_income
                    ? $tools.format(balance.total_income)
                    : "0.00"
                }}</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 月份筛选 -->
        <view class="selectView solid-top">
          <view class="selectYearsBox flex align-center justify-between">
            <view class="flex align-center">
              <picker
                mode="date"
                :value="year"
                :start="yearCurrent"
                fields="year"
                @change="bindDateChange"
              >
                <view class="uni-input">{{ year }}</view>
              </picker>
              年
              <u-icon
                class="xIcon"
                name="arrow-down-fill"
                color="#fff"
                size="24"
              ></u-icon>
            </view>
            <view class="noticeText flex align-center">
              <u-icon
                class="uIcon"
                name="error-circle"
                color="#fff"
                size="32"
              ></u-icon>
              <text>请勿频繁切换</text>
            </view>
          </view>
          <view class="selectMonthBox solid-bottom">
            <u-tabs
              :list="monthList"
              :is-scroll="true"
              :current="monthCurrent"
              bg-color="#fb4535"
              active-color="#fff"
              inactive-color="#fff"
              bar-height="10"
              @change="monthChange"
            ></u-tabs>
          </view>
        </view>
        <!-- tab切换 -->
        <u-sticky :enable="enable" offset-top="0">
          <view class="tabSwiperMain solid-bottom">
            <u-tabs
              :list="tabList"
              :is-scroll="false"
              bar-height="10"
              active-color="#fb4535"
              :current="current"
              @change="tabChange"
            ></u-tabs>
          </view>
        </u-sticky>
        <!-- 列表 -->
        <!-- 交易返现列表开始 -->
        <view class="incomeListMain">
          <view class="incomeListBox">
            <view v-if="current == 0">
              <view
                class="tradeIncomeItemHeader flex align-center justify-between"
              >
                <view class="left">交易收益</view>
                <view class="right flex align-center" @tap="viewDayIncomTap">
                  查看{{ year }}年{{ month }}月每日交易收益
                  <u-icon
                    class="uIcon"
                    name="arrow-right"
                    color="#333"
                    size="28"
                  ></u-icon>
                </view>
              </view>
              <view v-if="transactionList.length > 0">
                <view
                  class="tradeIncomeItem flex align-center justify-between"
                  v-for="(item, index) in transactionList"
                  :key="index"
                >
                  <view class="left flex align-center">
                    <u-icon
                      class="uIcon"
                      :name="icon_obj[item.trade_type]"
                      custom-prefix="custom-icon"
                      size="50"
                    ></u-icon>
                    {{ trade_type_obj[item.trade_type] }}
                  </view>
                  <view class="right">
                    <text v-if="item.total_income > 0">+</text>
                    {{ item.total_income }}
                  </view>
                </view>
              </view>
            </view>
            <view
              class="noMachine flex align-center"
              v-if="transactionList.length == 0 && current == 0 && isLoad"
            >
              <image
                src="../../static/images/noData/zwjl.png"
                mode="widthFix"
              ></image>
              <text>暂无记录</text>
            </view>
            <!-- 交易返现列表结束 -->
            <!-- 激活返现列表开始 -->
            <view v-if="activeList.length > 0">
              <view v-if="current == 1">
                <view
                  class="incomeItem"
                  v-for="(item, index) in activeList"
                  :key="index"
                >
                  <view class="top flex align-center justify-between">
                    <view class="left">
                      <text>{{
                        $u.timeFormat(item.active_time, "yyyy-mm-dd hh:MM:ss")
                      }}</text>
                      <text v-if="item.type == 1">激活收益</text>
                      <text v-if="item.type >= 2 && item.type <= 29"
                        >激活极差收益</text
                      >
                      <text v-else>其他收益</text>
                    </view>
                    <view class="right">
                      <text v-if="item.revert_money > 0">+</text>
                      {{ item.revert_money }}
                    </view>
                  </view>
                  <view class="sub solid-top" v-if="item.number">
                    <text>终端编号：{{ item.number }}</text>
                    <text>产品名称：{{ item.name }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view
              class="noMachine flex align-center"
              v-if="activeList.length == 0 && current == 1 && isLoad"
            >
              <image
                src="../../static/images/noData/zwjl.png"
                mode="widthFix"
              ></image>
              <text>暂无记录</text>
            </view>
            <!-- 激活返现列表结束 -->
            <u-loadmore
              v-if="activeList.length>0"
              style="padding:30rpx 0;"
              :status="status"
              :icon-type="iconType"
              :load-text="loadText"
              @loadmore="loadMoreTap"
            />
            <view style="height: 30rpx; width: 100%"></view>
          </view>
        </view>
      </view>
    </view>
    <u-toast ref="uToast" />
    <!-- 底部导航 -->
    <u-tabbar
      :list="tabBarList"
      :mid-button="false"
      :active-color="activeColor"
      :inactive-color="inactiveColor"
      :border-top="borderTop"
      mid-button-size="76"
      icon-size="40"
      height="105rpx"
    ></u-tabbar>
    <toast></toast>
  </view>
</template>

<script>
export default {
  data() {
    return {
      enable: true,
      tabBarList: [],
      borderTop: true,
      inactiveColor: "#909399",
      activeColor: "#fb4535",
      tabList: [
        {
          name: "交易收益",
        },
        {
          name: "激活收益",
        },
      ],
      current: 0,
      year: "",
      month: "",
      yearCurrent: "2018",
      monthCurrent: 0,
      monthList: [
        {
          name: "1月",
        },
        {
          name: "2月",
        },
        {
          name: "3月",
        },
        {
          name: "4月",
        },
        {
          name: "5月",
        },
        {
          name: "6月",
        },
        {
          name: "7月",
        },
        {
          name: "8月",
        },
        {
          name: "9月",
        },
        {
          name: "10月",
        },
        {
          name: "11月",
        },
        {
          name: "12月",
        },
      ],
      yearMouthDate: "2021-04",
      balance: {
        today_income: "0.00",
        total_income: "0.00",
      },
      page: 1,
      transactionList: [],
      activeList: [],
      iconType: "flower",
      noMore: false,
      loadMore: false,
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉或点击",
        loading: "努力加载中",
        nomore: "实在没有了",
      },
      isLoad: false,
      icon_obj: {
        ccpay: "creditcard-fill",
        dcpay: "creditcard-fill",
        dctop: "creditcard-fill",
        alipay: "z-alipay",
        wxpay: "weixin2",
        cuppay: "saoma",
      },
      trade_type_obj: {
        ccpay: "贷记卡支付",
        dcpay: "借记卡支付",
        dctop: "借记卡支付",
        alipay: "支付宝支付",
        wxpay: "微信支付",
        cuppay: "银联扫码支付",
      },
    };
  },
  onLoad() {
    this.tabBarList = this.$tabbar.tabbar;
    this.getYearsMonth();
    this.GetYearMouthDate();
    this.initStatus();

    this.$u.api.getIncome1({searchMonth:'2021-07'}).then((res)=>{
      console.log(1 + JSON.stringify(res));
    })
    this.$u.api.getIncome2({searchMonth:'2021-07'}).then((res)=>{
      console.log(2 +  JSON.stringify(res));
    })
  },
  onShow() {
    this.enable = true;
    let isAuth = uni.getStorageSync("loginInfo").isCert;
    if (isAuth == 1) {
      this.withdrawMoney();
    }
  },
  onHide() {
    this.enable = false;
  },
  onReachBottom() {
    let current = this.current;
    this.page = this.page + 1;
    if (current == 1) {
      this.getActiveIncomeInfo();
    }
  },
  onPullDownRefresh() {
    this.initStatus();
    let current = this.current;
    if (current == 0) {
      this.getIncomeInfo();
    } else if (current == 1) {
      this.getActiveIncomeInfo();
    }
  },
  methods: {
    //初始化状态
    initStatus() {
      this.transactionList = [];
      this.activeList = [];
      this.page = 1;
      this.noMore = false;
      this.isLoad = false;
      this.loadMore = false;
      this.status = "loadmore";
    },
    monthChange(index) {
      this.monthCurrent = index;
      this.page = 1;
      let $month = index + 1;
      if ($month < 10) {
        $month = "0" + $month;
      }
      this.month = $month;
      this.GetYearMouthDate();
    },
    tabChange(index) {
      this.initStatus();
      this.current = index;
      if (this.current == 0) {
        this.getIncomeInfo();
      } else if (this.current == 1) {
        this.getActiveIncomeInfo();
      }
    },
    bindDateChange: function (e) {
      this.initStatus();
      this.year = e.target.value;
      this.monthCurrent = 0;
      this.month = "01";
      this.GetYearMouthDate();
    },

    // 获取当前年月
    getYearsMonth() {
      let date = new Date();
      let currentYear = date.getFullYear();
      let currentMonth = date.getMonth() + 1;
      currentMonth = currentMonth < 10 ? "0" + currentMonth : currentMonth;
      // let mydate = currentYear.toString() + "-" + currentMonth.toString();
      // 当月
      this.monthCurrent = date.getMonth();
      this.year = currentYear;
      this.month = currentMonth;
    },
    GetYearMouthDate() {
      this.initStatus();
      this.yearMouthDate = this.year + "-" + this.month;
      if (this.current == 0) {
        this.getIncomeInfo();
      } else if (this.current == 1) {
        this.getActiveIncomeInfo();
      }
    },
    loadMoreTap() {
      let current = this.current;
      this.page = this.page + 1;
      if (current == 1) {
        this.getActiveIncomeInfo();
      }
    },
    // 获取总计展示
    withdrawMoney() {
      this.$u.api.getUserIncome().then((res) => {
        if (res.status == 200) {
          this.balance = res.result;
        }
      });
    },
    // 获取交易返现
    getIncomeInfo() {
      this.$u.api
        .getTradeIncome({
          searchMonth: this.yearMouthDate,
        })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            this.transactionList = datas;
          } else {
            this.$refs.uToast.show({
              title: "加载失败",
              type: "error",
            });
            setTimeout(() => {
              this.$u.route({
                url: "/pages/index/index",
                type: "switchTab",
              });
            }, 2000);
          }
          this.isLoad = true;
          uni.stopPullDownRefresh();
        });
    },
    // 获取激活返现
    getActiveIncomeInfo() {
      this.$u.api
        .getActiveIncome({
          searchMonth: this.yearMouthDate,
          page: this.page,
          limit: 10,
        })
        .then((res) => {
          if (res.status == 200) {
            let datas = res.result;
            if (this.page == 1 && datas.length == 0) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page == 1 && datas.length < 10) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length < 10) {
              this.noMore == true;
              this.status = "nomore";
            }
            if (this.page > 1 && datas.length == 10) {
              this.status = "loading";
            }
            this.activeList = this.activeList.concat(datas);
          } else {
            this.$refs.uToast.show({
              title: "加载失败",
              type: "error",
            });
            setTimeout(() => {
              this.$u.route({
                url: "/pages/index/index",
                type: "switchTab",
              });
            }, 2000);
          }
          this.isLoad = true;
          uni.stopPullDownRefresh();
        });
    },
    viewDayIncomTap() {
      if (this.transactionList.length > 0) {
        this.$u.route({
          url: "/pages/income/tradeDayIncome",
          params: {
            searchMonth: this.yearMouthDate,
          },
        });
      } else {
        this.$refs.uToast.show({
          title: `${this.month}月暂无交易收益`,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.monthIncomeMain {
  position: relative;

  .circleView {
    width: 300rpx;
    height: 300rpx;
    border-radius: 50%;
    position: absolute;
    top: -100rpx;
    right: -120rpx;
    border: 50rpx solid rgba(253, 149, 140, 0.5);
    z-index: 9;
  }

  .monthIncomeHeader {
    background-color: #fb4535;
    padding: 50rpx 40rpx;

    .monthTotalIcomeBox {
      position: relative;
      z-index: 99;

      view {
        font-weight: bold;
        color: #fff;

        &:nth-of-type(1) {
          font-size: 38rpx;
          padding-left: 5rpx;

          text {
            font-size: 38rpx;
            padding-right: 10rpx;
          }
        }

        &:nth-of-type(2) {
          font-size: 38rpx;
          padding-top: 20rpx;

          text {
            font-size: 80rpx;
            font-family: "numberFont";
            letter-spacing: 5rpx;
            padding-left: 10rpx;
          }
        }
      }
    }
  }

  .monthIncomeBody {
    position: relative;
    background-color: #fb4535;

    &::before {
      content: "";
      width: 100%;
      height: 8rpx;
      background: url("../../static/images/lineImg.png") no-repeat;
      background-size: 100% 100%;
      position: absolute;
      top: -4rpx;
      right: 0;
      z-index: 10;
    }

    .iconBox {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      top: -30rpx;
      right: 40rpx;
      background-color: #fff;
      box-shadow: 0 0 10rpx #f76b6c;
      border-radius: 50%;
      z-index: 99;

      .xIcon {
        font-weight: bold;
      }
    }

    .otherTotalBox {
      padding: 30rpx;

      .totalView {
        padding: 30rpx 0;

        > view {
          height: 80rpx;
          color: #fff;
          text-align: center;

          view {
            font-size: 50rpx;
            font-family: "numberFont";
            padding-right: 5rpx;
            display: block;
          }
        }
      }
    }
  }
}

.selectView {
  background-color: #fb4535;

  .selectYearsBox {
    padding: 20rpx 40rpx 10rpx;
    font-size: 40rpx;
    font-weight: bold;
    color: #fff;
    position: relative;
    z-index: 9;

    .xIcon {
      margin-left: 10rpx;
    }

    .uIcon {
      margin-right: 10rpx;
    }

    .noticeText {
      font-size: 32rpx;

      text {
        position: relative;
        top: -2rpx;
      }
    }
  }

  .selectMonthBox {
    padding: 0 18rpx 10rpx;
    background-color: #fb4535;
  }
}

.incomeListMain {
  .incomeListBox {
    padding: 10rpx;
    .listTotalBox {
      text-align: right;
      height: 80rpx;
      font-size: 36rpx;
      font-weight: bold;
      width: 100%;
      text {
        font-family: "numberFont";
        letter-spacing: 2rpx;
        padding-left: 10rpx;

        &:last-of-type {
          font-size: 28rpx;
          padding-left: 0;
        }
      }
    }

    .incomeItem {
      padding: 20rpx 30rpx;
      border-radius: 10rpx;
      background-color: #fff;
      margin-bottom: 10rpx;
      .top {
        .left {
          text {
            display: block;
            font-size: 28rpx;
            line-height: 48rpx;
            &:nth-of-type(2) {
              font-size: 32rpx;
            }
          }
        }
        .right {
          font-size: 50rpx;
          color: #fb4535;
          font-family: "numberFont";
          text {
            position: relative;
            top: -4rpx;
          }
        }
      }
      .sub {
        margin-top: 16rpx;
        padding-top: 20rpx;
        text {
          display: block;
        }
      }
    }
    .tradeIncomeItem {
      padding: 20rpx 30rpx;
      border-radius: 10rpx;
      background-color: #fff;
      margin-bottom: 10rpx;
      .left {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        .uIcon {
          margin-right: 10rpx;
        }
      }
      .right {
        font-size: 50rpx;
        font-family: "numberFont";
        color: #fb4535;
        > text {
          position: relative;
          top: -4rpx;
        }
        .uIcon {
          margin-left: 10rpx;
        }
      }
    }
    .tradeIncomeItemHeader {
      padding: 20rpx 30rpx;
      border-radius: 10rpx;
      background-color: #fff;
      margin-bottom: 10rpx;
      .left {
        font-weight: bold;
        color: #fb4535;
      }
    }
  }
}
</style>
